<template>
	<view class="home-page">
		<!-- <view class="search-box" @click="goPage('search')">搜索</view> -->
		<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :interval="2000"
			indicator-color="rgb(255 255 255 / 30%)" indicator-active-color="#36B0FF">
			<swiper-item v-for="item in bannerList">
				<image class="banner-img" :src="item.cover" @click="toDetail(item)" />
			</swiper-item>
		</swiper>

		<view class="navBar">
			<view class="category-button" @click="goPage('classify')">
				<image class="icon-img" :src="`${imgBaseUrl}navbar-1.webp`" />
				作品分类
			</view>
			<view class="category-button" @click="goPage('followup')">
				<image class="icon-img" :src="`${imgBaseUrl}navbar-2.webp`" />
				我的追更
			</view>
			<view class="category-button" @click="goPage('vip')">
				<image class="icon-img" :src="`${imgBaseUrl}navbar-3.webp`" />
				会员中心
			</view>
		</view>

		<view class="page-content">

			<view class="section-hot" v-if="i32list.length">
				<view class="title-title">
					<image class="title-img" :src="`${imgBaseUrl}title-icon-1.webp`" />
					{{ title_1 }}
				</view>
				<view class="item-content">
					<view class="book-item" @click="toDetail(item)" v-for="item in i32list.slice(0, 6)">
						<image class="book-img" :src="item.coverpic" />
						<view class="book-name text-ellipsis">{{ item.title }}</view>
					</view>
				</view>

				<view class="change-box" v-if="i32list.length > 6">
					<button class="change-btn" @click="goPage('moreList', 4)">
						<image class="change-img" :src="`${imgBaseUrl}icon-more-.png`" />
						更多
					</button>
					<view class="border-line"></view>
					<button class="change-btn" @click="listChange()">
						<image class="change-img" :src="`${imgBaseUrl}change-icon-.png`" />
						换一换
					</button>
				</view>
			</view>

			<view class="section-bro" v-if="i3list.length">
				<view class="bro-title">
					<view class="flex-s">
						<image class="bro-img" :src="`${imgBaseUrl}icon-bro-1.webp`" />
						{{ title_2 }}
					</view>
					<view class="bro-more" @click="goPage('moreList', 3)" v-if="i3list.length > 4">
						更多
						<image class="bro-more-img" :src="`${imgBaseUrl}bro-icon-more.webp`" />
					</view>
				</view>
				<view class="bro-banner" @click="toDetail(i3list[0])">
					<image class="bro-banner-img" :src="i3list[0]?.cover" mode="aspectFill" />
					<view class="bro-banner-title">{{ i3list[0]?.title }}</view>
					<view class="bro-banner-disc text-ellipsis">{{ i3list[0]?.desc }}</view>
				</view>
				<view class="bro-content">
					<view class="bro-item" @click="toDetail(item)" v-for="item in i3list.slice(1, 4)">
						<image class="bro-img" :src="item.coverpic" />
						<view class="bro-name text-ellipsis">{{ item.title }}</view>
					</view>
				</view>

			</view>

			<view class="section-classify" v-if="classifyList.length">
				<view class="classify-title">
					<image class="classify-img" :src="`${imgBaseUrl}text-classify.webp`" />
					<view class="classify-more" @click="goPage('classify')">
						全部
						<image class="classify-more-img" :src="`${imgBaseUrl}blue-more.webp`" />
					</view>
				</view>

				<scroll-view :scroll-x="true" class="classifi-scroll">
					<view :class="['classifi-item', clickItem?.id === item.id ? 'active-item' : '']" :id="item.id + ''"
						v-for="item in classifyList" :key="item.id" @click="scrollItemClick(item)">
						{{ item.title }}
					</view>
				</scroll-view>
				<view class="bro-content">
					<view class="bro-item" @click="toDetail(item)" v-for="item in classifyBookList">
						<image class="bro-img" :src="item.coverpic" />
						<view class="bro-name text-ellipsis">{{ item.title }}</view>
					</view>
				</view>

			</view>




			<view class="section-list" v-if="dataList?.length">
				<view class="list-title">
					<image class="list-img" :src="`${imgBaseUrl}more-list-icon.webp`" />
					{{ title_3 }}
				</view>
				<view class="list-content">
					<view class="list-item" @click="toDetail(item)" v-for="item in dataList">
						<image class="list-img" :src="item.coverpic" />
						<view class="list-name text-ellipsis">{{ item.title }}</view>
						<view class="list-disc">
							<template>
								<view class="l-1">{{ item.isfinish ? '完结' : '连载' }}</view>
								<view class="l-2"></view>
								<view class="l-3">共{{ item.allchapter }}话</view>
							</template>
							<!-- <template>
								<view>连载</view>
								<view></view>
								<view>已更7话</view>
							</template> -->
						</view>
					</view>
				</view>
			</view>

		</view>


	</view>

</template>

<script lang="ts" setup>
import { getHomeData, getChangeAnimesList, getAnimeList, getHistoryChaps } from '@/api';
import { useLoginSwitch } from '@/hooks';
import { ref, getCurrentInstance } from 'vue'

const { imgBaseUrl } = getCurrentInstance()?.proxy as any;
const bannerList = ref<API.BookItem[]>([])
const classifyList = ref<{ id: number, title: string }[]>([])
const classifyBookList = ref<API.BookItem[]>([])
const i3list = ref<API.BookItem[]>([])
const i32list = ref<API.BookItem[]>([])
const dataList = ref<API.BookItem[]>()
const clickItem = ref<{ id: number, title: string }>()
const title_1 = ref('')
const title_2 = ref('')
const title_3 = ref('')


const goPage = (key: string, type?: number) => {
	switch (key) {
		case 'classify':
			uni.navigateTo({ url: `/pages/category/index` })
			break;
		case 'followup':
			uni.navigateTo({ url: `/pages/follow-up/index` })
			break;
		case 'vip':
			uni.navigateTo({ url: `/pages/vip-center/index` })
			break;
		case 'search':
			uni.navigateTo({ url: `/pages/search-page/index` })
			break;
		case 'moreList':
			uni.navigateTo({ url: `/pages/more-list/index?type=${type}` })
			break;
	}
}



const scrollItemClick = (item: { id: number, title: string }) => {
	clickItem.value = item
	getClassifyListData()
}

const toDetail = async (item: API.BookItem) => {
	// uni.navigateTo({ url: `/pages/book-detail/index?&id=${item.id}` });
	const { data } = await getHistoryChaps(item.id)
	uni.navigateTo({ url: `/pages/readingPage/index?&id=${item?.id}&chapter=${data.history_chapter}` });
}

const getClassifyListData = async () => {
	const { data } = await getAnimeList({ page: 1, page_size: 6, classifyid: clickItem.value?.id })
	classifyBookList.value = data.data
}


const getData = async () => {
	uni.showLoading({ title: '加载中', icon: 'none' });
	const { data } = await getHomeData()
	data.forEach(async (item: any, index: number) => {
		//  "view_page_position" //块类型  1、banner 2、分类 3、1+3封面 4、3*2封面  5、瀑布流
		if (item.view_page_position === 1) {
			bannerList.value = item.items
		}
		if (item.view_page_position === 2) {
			classifyList.value = item.items.map((item: any) => ({ id: item.id, title: item.title }))
			clickItem.value = classifyList.value.at(0)
			getClassifyListData()
		}
		if (item.view_page_position === 3) {
			i3list.value = item.items
			title_2.value = item.title
		}
		if (item.view_page_position === 4) {
			i32list.value = item.items
			title_1.value = item.title
		}
		if (item.view_page_position === 5) {
			dataList.value = item.items
			title_3.value = item.title
		}
	});
	uni.hideLoading()
}

const listChange = async () => {
	const { data } = await getChangeAnimesList()
	i32list.value = data
}

useLoginSwitch(async () => {
	await getData()
})
</script>

<style lang="scss" scoped>
.flex-s {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.home-page {
	width: 100vw;
	height: 100vh;
	position: relative;

	.search-box {
		width: 100%;
		height: 40rpx;
		position: absolute;
		top: 216rpx;
		left: 0;
		z-index: 9;
		text-align: center;
		color: #ffffff;
	}

	.swiper {
		height: 630rpx;
		width: 100%;

		.banner-img {
			width: 100%;
			height: 100%;
		}
	}

	.navBar {
		background:url(#{$imgBaseUrl}nav-bar-bg.webp) no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 128rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: -12rpx;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		position: relative;

		.category-button {
			font-size: 28rpx;
			color: #222222;
			padding: 0 32rpx;
			border-right: 2rpx solid #E5E5E5;
			display: flex;
			justify-content: center;
			align-items: center;

			&:last-child {
				border-right: none;
			}

			.icon-img {
				margin-right: 8rpx;
				width: 48rpx;
				height: 48rpx;
			}
		}
	}

	.page-content {
		padding: 0 0 40rpx;
		background: #ffffff;

		.section-hot {
			padding: 0 24rpx 40rpx;

			.title-title {
				font-size: 32rpx;
				color: #222222;
				display: flex;
				align-items: center;

				.title-img {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.item-content {
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: center;
				margin-top: 8rpx;

				.book-item {
					margin-top: 28rpx;
					margin-right: 22rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					.book-img {
						width: 218rpx;
						height: 292rpx;
						border-radius: 16rpx;
					}

					.book-name {
						width: 218rpx;
						margin-top: 6rpx;
						font-size: 28rpx;
						color: #222222;
					}

				}
			}

			.change-box {
				width: 100%;
				height: 88rpx;
				background: #F7F7F7;
				border-radius: 76rpx 76rpx 76rpx 76rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 42rpx;
				overflow: hidden;

				.border-line {
					width: 2rpx;
					height: 40rpx;
					border: 1rpx solid #DFDFDF;
				}

				.change-btn {
					font-size: 24rpx;
					color: #8B8B8B;
					padding: 0;
					margin: 0;
					background: #F7F7F7;
					display: flex;
					justify-content: center;
					align-items: center;
					border: none;
					width: 324rpx;

					&::after {
						content: none;
					}

					.change-img {
						width: 30rpx;
						height: 30rpx;
						margin-right: 12rpx;
					}
				}
			}
		}

		.section-bro {
			padding: 40rpx 24rpx;
			border-top: 12rpx solid #F8F9FB;

			.bro-title {
				font-size: 32rpx;
				color: #222222;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.bro-img {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}

				.bro-more {
					font-size: 24rpx;
					color: #8B8B8B;

					.bro-more-img {
						width: 12rpx;
						height: 24rpx;
					}
				}
			}

			.bro-banner {
				margin-top: 28rpx;
				width: 100%;
				height: 532rpx;
				background: linear-gradient(to right, #DCECFF, #C3FCFF);
				border-radius: 20rpx;
				overflow: hidden;

				.bro-banner-img {
					width: 100%;
					height: 408rpx;
				}

				.bro-banner-title {
					font-size: 28rpx;
					color: #333333;
					margin-top: 20rpx;
					text-indent: 20rpx;
				}

				.bro-banner-disc {
					font-size: 24rpx;
					color: #333333;
					margin-top: 8rpx;
					text-indent: 20rpx;
				}
			}

			.bro-content {
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: center;
				margin-top: 8rpx;

				.bro-item {
					margin-top: 20rpx;
					margin-right: 22rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					.bro-img {
						width: 218rpx;
						height: 292rpx;
						border-radius: 16rpx;
					}

					.bro-name {
						width: 218rpx;
						margin-top: 6rpx;
						font-size: 28rpx;
						color: #222222;
					}

				}
			}

		}

		.section-classify {
			padding: 40rpx 24rpx;
			border-top: 12rpx solid #F8F9FB;
			background:url(#{$imgBaseUrl}classify-top-bg.webp) no-repeat;
			background-size: 100% 262rpx;
			background-position: 0 0;

			.classify-title {
				font-size: 32rpx;
				color: #222222;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.classify-img {
					width: 80rpx;
					height: 34rpx;
				}

				.classify-more {
					font-size: 24rpx;
					color: #13A4FF;

					.classify-more-img {
						margin-left: 12rpx;
						width: 12rpx;
						height: 24rpx;
					}
				}
			}

			.classifi-scroll {
				width: 100%;
				height: 56rpx;
				overflow-x: auto;
				box-sizing: border-box;
				white-space: nowrap;

				.classifi-item {
					width: 96rpx;
					height: 56rpx;
					font-size: 24rpx;
					color: rgba(51, 51, 51, 0.5);
					margin-right: 12rpx;
					padding: 8px 24rpx;
					white-space: nowrap;
					display: inline-block;

					&.active-item {
						font-size: 28rpx;
						color: #323335;
					}
				}
			}


			.bro-content {
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: center;
				margin-top: 8rpx;

				.bro-item {
					margin-top: 20rpx;
					margin-right: 22rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					.bro-img {
						width: 218rpx;
						height: 292rpx;
						border-radius: 16rpx;
					}

					.bro-name {
						width: 218rpx;
						margin-top: 6rpx;
						font-size: 28rpx;
						color: #222222;
					}

				}
			}

		}

		.section-list {
			padding: 40rpx 24rpx 0;
			border-top: 12rpx solid #F8F9FB;

			.list-title {
				font-size: 32rpx;
				color: #222222;
				display: flex;
				align-items: center;

				.list-img {
					margin-right: 16rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

			.list-content {
				display: flex;
				flex-flow: row wrap;
				justify-content: flex-start;
				align-items: center;
				margin-top: 8rpx;

				.list-item {
					margin-top: 28rpx;
					margin-right: 18rpx;

					&:nth-child(2n) {
						margin-right: 0;
					}

					.list-img {
						width: 342rpx;
						height: 456rpx;
						border-radius: 24rpx;
					}

					.list-name {
						width: 342rpx;
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #222222;
					}

					.list-disc {
						display: flex;
						width: 100%;
						margin-top: 4rpx;
						font-size: 24rpx;
						color: #8B8B8B;
						justify-content: flex-start;
						align-items: center;

						.l-2 {
							width: 2rpx;
							height: 16rpx;
							background-color: #DFDFDF;
							margin: 0 12rpx;
						}
					}
				}
			}

		}


	}
}
</style>
